<template>
    <div>
        <div v-loading="available == null" class="search_res" @click="onRegister()">
        <div class="flex_ai">
            <img v-if="available" src="@/assets/img/icon_success.svg" alt="" srcset="">
            <img v-else src="@/assets/img/icon_warn.svg" alt="" srcset="">
            <p v-if="title">{{title + '.web3'}}</p>
        </div>
        <div class="flex_ai">
            <!-- <p v-if="year" class="year_p">{{year}} UST/year</p> -->
            <span v-if="available" class="right">Available</span>
            <span v-else class="red">{{text}}</span>
            <span v-if="err" class="red">{{err}}</span>
            <div @click.stop="onStar()" class="star" :class="{'ups':star}"></div>
            <div v-if="available" class="connect">MINT</div>
        </div>
        </div>
        <div class="div_showerr">
                <el-dialog
                    v-model="dialogVisible"
                    :width="640"
                    :before-close="handleClose"
                    >
                    <div class="flex">
                        <div>
                            <h2>SORRY.</h2>
                            <span >YOUR ADDRESS IS NOT ELIGIBLE</span>
                            <p>Only addresses affiliated with an open letter signature are eligible at this time</p>
                            <p>Wider access will be rolled out soon. In the meantime, Take a look at SEER's official website and see what's built on SEER  </p>
                            <div class="btns">
                                <router-link to="/">EXPLORE APPS BUILT ON SEER</router-link>
                            </div>
                        </div>
                        <img src="@/assets/img/water.svg" alt="" srcset="">
                    </div>
                </el-dialog>
            </div>
        </div>
    
</template>

<script>
import { ElMessage } from 'element-plus'
export default {
    props:['title','err','isStar','year'],
    data(){
        return {
            star:null,
            dialogVisible:false,
            starArr:null,
            index:null,
            available:null,
            state:null,
            text:'--',
            address:null
        }
    },
    mounted(){
        // console.log('-----',this.$store.state.address)
        this.address = localStorage.getItem('address')
        if(this.address){
            this.onAvailable(this.address,this.title)
        }else{
            this.onAvailable(null,this.title)
        }
        
        this.init()
    },
    methods:{
        init(){
            this.starArr = JSON.parse(localStorage.getItem('star'))   || []
            console.log(this.starArr)
            if(this.starArr && this.starArr.length > 0){
                for(let i=0;i<this.starArr.length;i++){
                    if(this.starArr[i].name == this.title){
                        this.star = true;
                        this.index = i
                        console.log('初始化索引',this.index)
                        return
                    }
                }
            }
            
        },
        onStar(){
            this.init()
            console.log('索引',this.index)
            if(this.index != null){
                if(this.star){
                    this.star = false
                    this.starArr.splice(this.index, 1)
                    this.index = null
                    console.log('数组this.starArr')
                    console.log(JSON.stringify(this.starArr))
                    localStorage.setItem('star',JSON.stringify(this.starArr))
                    ElMessage.success('Cancel collection')
                }
            }else{
                if(!this.star){
                    this.star = true
                    this.starArr.push({name:this.title,star:this.star})
                    localStorage.setItem('star',JSON.stringify(this.starArr))
                    console.log('数组this.starArr')
                    console.log(JSON.stringify(this.starArr))
                    ElMessage.success('Collection of success')
                }
            }
            // if(this.star){
            //     this.star = false
            //     if(this.index !== null){
            //         this.starArr.splice(this.index, 1)
            //         localStorage.setItem('star',JSON.stringify(this.starArr))
            //     }else{
            //         this.starArr = []
            //         localStorage.setItem('star',JSON.stringify(this.starArr))
            //     }
            //     ElMessage.success('Cancel collection')
            // }else{
            //     this.star = true
            //     if(this.index !== null){
            //         console.log(this.index)
            //         this.starArr[this.index].star = true
            //         localStorage.setItem('star',JSON.stringify(this.starArr))
                    
            //     }else{
            //         this.starArr.push({name:this.title,star:true})
            //         localStorage.setItem('star',JSON.stringify(this.starArr))
            //     }
            //     ElMessage.success('Collection of success')
            // }
        },
        async onAvailable(address,title){
            if(window.contract7){
                try {
                    if(address){
                        this.state = await window.contract7.methods.available(address,title).call()
                    }else{
                        this.state = await window.contract7.methods.available(title).call()
                    }
                    
                    console.log('this.state',this.state)
                    if(this.state == '4'){
                        this.text = 'Available'
                        this.available = true
                    }
                    if(this.state == '0'){
                        this.text = 'Available'
                        this.available = true
                    }else if(this.state == '1' || this.state == '3'){
                        this.text = 'unAvailable'
                        this.available = false
                    }else if(this.state == '2'){
                        this.text = 'This name is already taken'
                        this.available = false
                    }
                } catch (error) {
                    ElMessage.error(error.message)
                }
            }
        },
        async onRegister(){
            if(this.available == null){
                ElMessage.warning('loading...')
                return
            }
            // 连接
            if(window.ethereum && window.ethereum.chainId == '0x3'){
                // let address = await this.$utils.getAccount();
                console.log(this.address)
                if(this.address){
                   if(this.available && this.state != '4'){
                        localStorage.removeItem('state')
                        this.$router.push({path:'/register',query: {title:this.title}})
                   }
                   if(!this.available && this.state != '4'){
                        localStorage.setItem('state','4')
                        this.$router.push({path:'/register',query: {title:this.title}})
                   }
                   if(this.state == '4'){
                        // ElMessage.error('SORRY , YOUR ADDRESS IS NOT ELIGIBLE')
                        this.dialogVisible = true
                   }
                }else{
                    ElMessage.error('Please open the connect MetaMask')
                }
            }else{
                ElMessage.error('Please open the connect MetaMask,and check the network')
            }
        }
    },
    watch:{
        '$store.state.address':function(val){
            console.log('val---111')
            console.log(val)
            if(val){
                this.address = val
                this.available = null
                this.onAvailable(val,this.title)
            }else{
                this.address = null
                this.available = null
                this.onAvailable(null,this.title)
            }
        }
    }
}
</script>



<style lang="less" scoped>
    .year_p{padding-right: 20px;font-weight: normal;color: #bbb;font-size: 14px;}
    .div_showerr{
        /deep/ .el-dialog__body{padding:30px}
        h2{color: #2481E2;text-align: left;font-size: 48px;margin-bottom: 10px;}
        span{color: #2481E2;font-size: 20px;padding-bottom: 45px;display: inline-block;}
        p{color:#aaa;font-size: 14px;margin-bottom: 20px;word-break: break-word;letter-spacing: 0.5px;}
        .btns{
            margin-top: 45px;
            margin-bottom:10px;
            a{
                color: #2481E2;
                border: 1px solid #2481E2;
                display: inline-block;
                padding: 16px 30px;
                border-radius: 30px;
                color: #2481E2;
            }
        }
    }
</style>
